﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>幸运大抽奖</title>
	<link href="style.css" rel="stylesheet">
	<link rel="icon" type="text/css" href="https://orz.red/img/ico.png">
</head>
<body>
<div id="demo1" class="luckdraw">
	<h2>幸运大抽奖</h2>
	<ul>
		<li>号码1</li>
		<li>号码2</li>
		<li>号码3</li>
		<li>号码4</li>
		<li>号码5</li>
		<li>号码6</li>
		<li>号码7</li>
		<li>号码8</li>
		<li>号码9</li>
		<li>号码10</li>
		<div id="go1" class="luckdraw-go">马上抽奖GO</div>
	</ul>
</div>

<div id="demo2" class="luckdraw">
	<h2>幸运大抽奖</h2>
	<ul>
		<li>号码1</li>
		<li>号码2</li>
		<li>号码3</li>
		<li>号码4</li>
		<li>号码5</li>
		<li>号码6</li>
		<li>号码7</li>
		<li>号码8</li>
		<li>号码9</li>
		<li>号码10</li>
		<div id="go2" class="luckdraw-go">马上抽奖GO</div>
	</ul>
</div>

<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.luckdraw.js"></script>
<script>
	$(function(){
		// 后端抽奖
		$('#demo1>ul').luckdraw({
			row: 3,        //行
			column: 4,     //列
			spacing: 5,    //空隙
			click: '#go1', //点击触发
			afterClick: function($this){
				// 设置中奖号码
				$this.target = 3;
			},
			onEnd:function(target){
				// target为获奖编号
				setTimeout(function(){
					alert('中奖号码'+target);
				},500);
			}
		});

		// 随机抽奖
		$('#demo2>ul').luckdraw({
			row : 3,        // 行
			column : 4,     // 列
			spacing: 5,     // 空隙
			click : '#go2', // 点击触发
			onEnd:function(e){
				// e为获奖编号
				setTimeout(function(){
					alert('中奖号码'+e);
				},500);
			}
		});
	});
</script>
</body>
</html>